<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面标题区域 -->
    <div class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">关于我们</h1>
          <nav class="flex justify-center" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li><a href="#" class="hover:text-blue-600">首页</a></li>
              <li><span class="mx-2">/</span></li>
              <li class="text-gray-900">关于我们</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- 公司简介区域 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-4xl font-bold text-gray-900 mb-6">公司简介</h2>
            <div class="space-y-6 text-lg text-gray-600 leading-relaxed">
              <p>
                机械制造有限公司成立于1993年，是一家专业从事机械设备制造的现代化企业。经过30年的发展，
                我们已成为行业内具有重要影响力的制造商，为全球客户提供高品质、高性能的机械设备和完善的技术服务。
              </p>
              <p>
                公司拥有现代化的生产基地，占地面积50000平方米，建筑面积30000平方米。配备了先进的生产设备和检测仪器，
                建立了完善的质量管理体系，通过了ISO9001:2015质量管理体系认证、ISO14001:2015环境管理体系认证。
              </p>
              <p>
                我们始终坚持"质量第一、客户至上、持续改进、追求卓越"的质量方针，
                凭借先进的生产工艺、严格的质量管理和专业的技术团队，赢得了客户的广泛认可和信赖。
              </p>
            </div>
            <div class="mt-8 grid grid-cols-2 gap-6">
              <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">30+</div>
                <div class="text-gray-600">年制造经验</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">50+</div>
                <div class="text-gray-600">出口国家</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">500+</div>
                <div class="text-gray-600">专业员工</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">1000+</div>
                <div class="text-gray-600">合作客户</div>
              </div>
            </div>
          </div>
          <div>
            <img 
              class="rounded-lg shadow-lg" 
              src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20machinery%20manufacturing%20factory%20interior%20with%20advanced%20equipment%20professional%20workers%20clean%20environment&image_size=landscape_4_3" 
              alt="公司生产车间" 
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程区域 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">发展历程</h2>
          <p class="text-xl text-gray-600">三十年砥砺前行，见证行业发展历程</p>
        </div>
        
        <div class="relative">
          <!-- 时间线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-blue-600 h-full"></div>
          
          <div class="space-y-12">
            <div v-for="(milestone, index) in milestones" :key="milestone.year" 
                 :class="[index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse', 'flex flex-col lg:flex items-center']">
              <div class="lg:w-5/12 mb-6 lg:mb-0">
                <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                  <div class="text-2xl font-bold text-blue-600 mb-2">{{ milestone.year }}</div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ milestone.title }}</h3>
                  <p class="text-gray-600">{{ milestone.description }}</p>
                </div>
              </div>
              
              <!-- 时间点 -->
              <div class="flex justify-center lg:w-2/12">
                <div class="w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-lg z-10"></div>
              </div>
              
              <div class="lg:w-5/12">
                <img 
                  :src="milestone.image" 
                  :alt="milestone.title" 
                  class="rounded-lg shadow-lg w-full h-48 object-cover"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化区域 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">企业文化</h2>
          <p class="text-xl text-gray-600">以人为本，追求卓越，共创美好未来</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="culture in cultures" :key="culture.id" class="text-center group">
            <div class="bg-blue-50 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-100 transition-colors duration-300">
              <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                <path :d="culture.icon"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ culture.title }}</h3>
            <p class="text-gray-600">{{ culture.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 资质荣誉区域 -->
    <section class="py-20 bg-blue-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">资质荣誉</h2>
          <p class="text-xl text-gray-600">权威认证，品质保证</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="certificate in certificates" :key="certificate.id" 
               class="bg-white rounded-lg shadow-lg p-6 text-center hover:shadow-xl transition-shadow duration-300">
            <img 
              :src="certificate.image" 
              :alt="certificate.name" 
              class="w-24 h-24 mx-auto mb-4 object-contain"
            >
            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ certificate.name }}</h3>
            <p class="text-gray-600 text-sm mb-2">{{ certificate.issuer }}</p>
            <p class="text-gray-500 text-sm">获得时间：{{ certificate.date }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍区域 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">核心团队</h2>
          <p class="text-xl text-gray-600">专业的团队，卓越的服务</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="member in teamMembers" :key="member.id" 
               class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <img 
              :src="member.photo" 
              :alt="member.name" 
              class="w-full h-64 object-cover"
            >
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ member.name }}</h3>
              <p class="text-blue-600 font-medium mb-3">{{ member.position }}</p>
              <p class="text-gray-600 text-sm">{{ member.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 发展历程数据
const milestones = ref([
  {
    year: '1993',
    title: '公司成立',
    description: '机械制造有限公司正式成立，开始专业从事机械设备制造业务。',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=company%20founding%20ceremony%201990s%20industrial%20building%20establishment&image_size=landscape_4_3'
  },
  {
    year: '2000',
    title: '技术升级',
    description: '引进先进的数控设备和生产技术，产品质量和生产效率大幅提升。',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=CNC%20equipment%20installation%20technology%20upgrade%20modern%20machinery&image_size=landscape_4_3'
  },
  {
    year: '2008',
    title: '国际认证',
    description: '通过ISO9001质量管理体系认证，产品开始出口海外市场。',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=ISO%20certification%20quality%20management%20international%20standards&image_size=landscape_4_3'
  },
  {
    year: '2015',
    title: '智能制造',
    description: '投资建设智能化生产线，实现生产过程的自动化和数字化管理。',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20manufacturing%20automated%20production%20line%20digital%20factory&image_size=landscape_4_3'
  },
  {
    year: '2020',
    title: '创新发展',
    description: '成立研发中心，加大技术创新投入，推出多项具有自主知识产权的产品。',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=research%20development%20center%20innovation%20laboratory%20modern%20technology&image_size=landscape_4_3'
  }
])

// 企业文化数据
const cultures = ref([
  {
    id: 1,
    title: '诚信为本',
    description: '以诚待人，以信立业，建立长期稳定的合作关系',
    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 2,
    title: '创新驱动',
    description: '持续技术创新，推动产品升级，引领行业发展',
    icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'
  },
  {
    id: 3,
    title: '团队协作',
    description: '发挥团队力量，协同合作，共同实现企业目标',
    icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'
  },
  {
    id: 4,
    title: '追求卓越',
    description: '精益求精，不断提升，为客户提供最优质的产品和服务',
    icon: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'
  }
])

// 资质荣誉数据
const certificates = ref([
  {
    id: 1,
    name: 'ISO 9001:2015',
    issuer: '质量管理体系认证',
    date: '2020-06',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=ISO%209001%20certificate%20quality%20management%20system%20certification&image_size=square'
  },
  {
    id: 2,
    name: 'ISO 14001:2015',
    issuer: '环境管理体系认证',
    date: '2020-08',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=ISO%2014001%20environmental%20management%20certificate&image_size=square'
  },
  {
    id: 3,
    name: 'CE认证',
    issuer: '欧盟产品安全认证',
    date: '2019-12',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=CE%20certification%20European%20conformity%20mark&image_size=square'
  },
  {
    id: 4,
    name: '高新技术企业',
    issuer: '国家科技部认定',
    date: '2021-11',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=high-tech%20enterprise%20certificate%20technology%20innovation&image_size=square'
  },
  {
    id: 5,
    name: '专精特新企业',
    issuer: '工信部认定',
    date: '2022-09',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=specialized%20enterprise%20certificate%20manufacturing%20excellence&image_size=square'
  },
  {
    id: 6,
    name: '质量信得过产品',
    issuer: '中国质量协会',
    date: '2023-03',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=quality%20trusted%20product%20award%20excellence%20recognition&image_size=square'
  }
])

// 团队成员数据
const teamMembers = ref([
  {
    id: 1,
    name: '张总工程师',
    position: '技术总监',
    description: '30年机械制造经验，主导多项技术创新项目，拥有20多项专利技术。',
    photo: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20engineer%20portrait%20technical%20director%20manufacturing%20industry&image_size=portrait_4_3'
  },
  {
    id: 2,
    name: '李经理',
    position: '生产总监',
    description: '25年生产管理经验，精通精益生产和质量管理，确保产品质量稳定。',
    photo: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=production%20manager%20portrait%20manufacturing%20supervisor%20professional&image_size=portrait_4_3'
  },
  {
    id: 3,
    name: '王总监',
    position: '销售总监',
    description: '20年销售管理经验，深耕海外市场，建立了完善的全球销售网络。',
    photo: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=sales%20director%20portrait%20business%20professional%20international%20trade&image_size=portrait_4_3'
  }
])
</script>

<style scoped>
/* 时间线样式 */
@media (max-width: 1024px) {
  .absolute.left-1\/2 {
    left: 2rem;
    transform: translateX(0);
  }
}

/* 悬停效果 */
.group:hover .group-hover\:bg-blue-100 {
  background-color: #dbeafe;
}

/* 平滑过渡 */
.transition-shadow {
  transition: box-shadow 0.3s ease;
}

.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease;
}
</style>